<template>
	<view class="container qxlj_back2">
		<view class="section">
			<view class="flex_between flex_items">
				<view class="flex_start flex_items title_left">
					<view class="title">停车</view>
					<view class="subtitle">提前缴费快速通行</view>
				</view>
				<view class="fee">停车缴费</view>
			</view>

			<view v-for="(item, index) in parkingList" :key="index" class="item flex_between">
				<view>{{ item.name }}</view>
				<view class="location">{{ item.location }}</view>
			</view>
		</view>

		<view class="section">
			<view class="flex_between flex_items">
				<view class="flex_start flex_items title_left">
					<view class="title">充电</view>
					<view class="subtitle">停车充电</view>
				</view>
				<view class="fee">扫码充电</view>
			</view>

			<view v-for="(item, index) in chargingList" :key="index" class="item flex_between">
				<view>{{ item.name }}</view>
				<view class="location">{{ item.location }}</view>
			</view>

			<view class="description">充电费用说明</view>
			<view class="details">{{ chargingDescription }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parkingList: [{
						name: '1号停车场',
						location: '空闲车位666',
					},
					{
						name: '2号停车场',
						location: '空闲车位666',
					}
				],
				chargingList: [{
						name: '1号停车场',
						location: '空闲充电桩666',
						price: '￥20'
					},
					{
						name: '2号停车场',
						location: '空闲充电桩666',
						price: '￥20'
					}
				],
				chargingDescription: `
        1. 慢速充电桩（一般为220V交流充电）：
        高峰时段（一般为晚上8点至10点）：0.3元/度至0.6元/度；
        低谷时段（一般晚11点至次日早6点）：0.1元/度至0.3元/度；
        
        2. 快速充电桩（一般为400V直流充电）：
        高峰时段（一般为晚上8点至10点）：0.5元/度至1.0元/度；
        低谷时段（一般为晚上10点至次日早6点）：0.2元/度至0.5元/度；
      `
			};
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
		color: #fff;
	}

	.section {
		background: linear-gradient(90deg, #80B4FF, #6699FF);
		border-radius: 10px;
		padding: 20px;
		margin-bottom: 20px;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	.title_left {
		width: 60%;
	}

	.subtitle {
		font-size: 16px;
		margin-left: 5%;
	}

	.fee {
		font-size: 18px;
		font-weight: bold;
		font-size: 18px;
		font-weight: bold;
		padding: 2% 6%;
		border: 1px solid;
		border-radius: 7px;
	}

	.item {
		padding: 10px 4%;
		background: rgba(255, 255, 255, 0.2);
		margin-top: 2%;
		border-radius: 4px;
	}

	.location {}

	.price {}

	.description {
		font-weight: bold;
		margin-top: 10px;
	}

	.details {
		white-space: pre-line;
		/* 保持换行 */
	}
</style>